<%--
  User: Dylin
  Date: 2020/12/1 0001
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>世界小时</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
    <%--    导入card.css--%>
    <link rel="stylesheet" type="text/css"  href="/css/card/card.css"/>
</head>
<body>
    <table id="cww_table" lay-filter="cww_table"></table>
<%--    表格工具栏--%>
    <script type="text/html" id="cww_table_toolbar">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm"  lay-event="add">添加</button>
        </div>
    </script>
<%--    表格-行工具--%>
    <script type="text/html" id="cww_table_row_bar">
        {{#  if(d.type == 0 && d.status == 1){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="status">停用</a>
        {{#  }else if(d.status == 0){ }}
            <a class="layui-btn layui-btn-xs" lay-event="status">发布</a>
        {{#  } }}
        {{#  if(d.type == 0){ }}
            <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
        {{#  } }}
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    </script>
<%--    表单--%>
    <form id="cww_form" class="layui-form my_form"  style="display: none" lay-filter="cww_form">
        <input name="id" readonly="readonly" style="display: none"/>
        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <div class="layui-inline">
                    <select id="cww_type_select" name="type" style="height: auto" lay-filter="cww_type_select">
                        <option value="0" selected>轮播</option>
                        <option value="1">紧急</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input id="cww_form_start_time" name="startTime"  required placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input id="cww_form_end_time" name="endTime"  required placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">消息</label>
            <div class="layui-input-block">
                <textarea name="content" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">范围</label>
            <div class="layui-input-block">
                <select name="scope" id="game_select" placeholder="请选择" autocomplete="off"
                        lay-filter="game_select">
                </select>
            </div>
        </div>

        <button id="cww_form_submit" class="layui-btn" lay-filter="cww_form_submit" lay-submit style="display: none">立即提交</button>
        <button id="cww_form_reset" type="reset" class="layui-btn layui-btn-primary" style="display: none">重置</button>
    </form>


    <script>
        let cww_submit_url;
        let cww_table;
        layui.use(['table','layer','form','laydate'], function(){
             let  table = layui.table,
                layer = layui.layer,
                laydate = layui.laydate,
                form  = layui.form;
            laydate.render({
                elem: '#cww_form_start_time', //指定元素
                type: 'time'
            });
            laydate.render({
                elem: '#cww_form_end_time', //指定元素
                type: 'time'
            });
            cww_table=table.render({
                elem: '#cww_table',
                url: '/information/cww/query', //数据接口
                toolbar: '#cww_table_toolbar',
                page: false, //开启分页
                cols: [[ //表头
                    {field: 'type', title: '消息', width:100, sort: true, fixed: 'left',templet:function(d){
                            if(d.type==0){
                                return "轮播";
                            }else{
                                return "<span style=\"color: red;\">紧急</span>";
                            }
                        }},
                    {field: 'startTime', title: '开始时间', width:100, sort: true, fixed: 'left'},
                    {field: 'endTime', title: '结束时间', width:100, sort: true, fixed: 'left'},
                    {field: 'content', title: '消息', width:500, sort: true},
                    {field: 'status', title: '状态', width:50,templet:function(d){
                            if(d.status==1){
                                return "启用";
                            }else{
                                return "<span style=\"color: red;\">停用</span>";
                            }
                        }},
                    {field: 'scopeName', title: '范围', width:100},
                    {field: 'createTime', title: '添加时间', width:200},
                    {fixed: 'right',title: '操作', width: 200, align:'center', toolbar: '#cww_table_row_bar'}
                ]]
            });
            table.on("toolbar(cww_table)",function (obj) {
                switch(obj.event){
                    case 'add':
                        cww_submit_url='/information/cww/add';
                        //重置表单数据
                        let cww_form_reset=$("#cww_form_reset");
                        cww_form_reset.click();
                        layer.open({
                            id:"cww_layer",
                            type:1,
                            area: ['500px', '450px'],
                            content:$('#cww_form'),
                            btn:['提交','重置','关闭'],
                            yes: function(index, layero){
                                $("#cww_form_submit").click();
                                return false;
                            },
                            btn2:function(index, layero){
                                cww_form_reset.click();
                                return false;
                            }
                        })
                        break;
                };
            });
            table.on("tool(cww_table)",function (obj) {
                let data = obj.data; //获取选中的数据
                switch(obj.event){
                    case 'status':
                        let s=0;
                        if(data.status==0){
                            s=1;
                        }
                        $.ajax({
                            url: '/information/cww/status?id='+data.id+"&status="+s,
                            dataType: 'json',
                            type: 'get',
                            success: function (res) {
                                if(res.code==0){
                                    layer.msg(res.msg,{icon:1},function(){
                                        cww_table.reload();
                                    })
                                }else{
                                    layer.msg(res.msg,{icon:2});
                                }
                            }
                        });
                        break;
                    case 'edit':
                        cww_submit_url='/information/cww/edit';
                        form.val("cww_form", data);
                        layer.open({
                            id:"cww_layer",
                            type:1,
                            area: ['500px', '450px'],
                            content:$('#cww_form'),
                            btn:['提交','关闭'],
                            yes: function(index, layero){
                                $("#cww_form_submit").click();
                                return false;
                            }
                        })
                        break;
                    case 'del':
                        $.ajax({
                            url: '/information/cww/del?cwwId='+data.id,
                            dataType: 'json',
                            type: 'get',
                            success: function (res) {
                                if(res.code==0){
                                    layer.msg(res.msg,{icon:1},function(){
                                        cww_table.reload();
                                    })
                                }else{
                                    layer.msg(res.msg,{icon:2});
                                }
                            }
                        });
                        break;
                };
            })
            $.ajax({
                url: '/game/query',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    //使用循环遍历，给下拉列表赋值
                    $('#game_select').append(new Option("大厅",-1));// 下拉菜单里添加元素
                    $.each(data.data, function (index, value) {
                        $('#game_select').append(new Option(value.name,value.id));// 下拉菜单里添加元素
                    });
                    form.render("select");//重新渲染 固定写法
                }
            });
            form.on('select(cww_type_select)', function(data){
                if(data.value==1) {
                    $("#cww_form_start_time").val("00:00:00");
                }
            });
            form.on("submit(cww_form_submit)",function(data){
                let params=data.field;
                if('/card/cww/add'==cww_submit_url){
                    delete params.id;
                }
                $.post(cww_submit_url, params, function (res) {
                    if(res.code==0){
                        layer.msg(res.msg,{icon:1},function(){
                            layer.closeAll();
                            cww_table.reload();
                        })
                    }else{
                        layer.msg(res.msg,{icon:2});
                    }
                }, 'json');
                return false;
            })
        });
    </script>
</body>
</html>
